<!--
  LoginPage.vue

  登录页面组件

  该组件是东营旅游路线规划Web客户端的登录入口，提供用户认证功能。
  用户成功登录后会被重定向到主页面。目前使用硬编码的用户名和密码进行验证。
-->
<script setup lang="ts">
/**
 * Vue核心功能导入
 */
import { ref } from 'vue' // 导入响应式API

/**
 * Vue Router导入
 * 用于页面导航
 */
import { useRouter } from 'vue-router'

/**
 * Element Plus组件导入
 * 提供UI交互组件
 */
import { ElMessage } from 'element-plus' // 消息提示组件

/**
 * 状态管理导入
 * 用于存储用户认证状态
 */
import { useUserStore } from '@/stores' // 用户状态存储

/**
 * 表单数据
 * 使用ref创建响应式变量
 */
const username = ref('') // 用户名输入
const password = ref('') // 密码输入

/**
 * 路由和状态管理实例
 */
const router = useRouter() // 路由实例，用于页面导航
const userStore = useUserStore() // 用户状态存储实例

/**
 * 处理登录表单提交
 * 验证用户凭据并执行登录操作
 */
const handleLogin = () => {
  // 简单验证用户名和密码
  // 注意：在生产环境中应使用安全的认证机制，而不是硬编码凭据
  if (username.value === 'admin' && password.value === '123456') {
    // 登录成功
    userStore.setToken('admin-token') // 设置认证令牌
    router.push('/') // 导航到主页
  } else {
    // 登录失败
    ElMessage.error('用户名或密码错误') // 显示错误消息
  }
}
</script>

<template>
  <!-- 登录页面容器 - 占满整个视口高度并居中内容 -->
  <div class="login-container">
    <!-- 登录表单卡片 - 包含Logo和表单 -->
    <div class="login-box">
      <!-- Logo区域 -->
      <div class="logo">
        <img src="@/assets/sunzi.jpg" alt="Logo" />
      </div>

      <!-- 登录表单 - 阻止默认提交行为，使用handleLogin函数处理 -->
      <form @submit.prevent="handleLogin">
        <!-- 用户名输入组 -->
        <div class="form-group">
          <label for="username">用户名</label>
          <input
            type="text"
            id="username"
            v-model="username"
            placeholder="请输入用户名"
            required
          />
        </div>

        <!-- 密码输入组 -->
        <div class="form-group">
          <label for="password">密码</label>
          <input
            type="password"
            id="password"
            v-model="password"
            placeholder="请输入密码"
            required
          />
        </div>

        <!-- 登录按钮 -->
        <button type="submit">登录</button>
      </form>
    </div>
  </div>
</template>

<style scoped>
/**
 * 登录页面容器样式
 * 创建全屏居中的布局
 */
.login-container {
  display: flex;                /* 使用Flex布局 */
  justify-content: center;      /* 水平居中 */
  align-items: center;          /* 垂直居中 */
  height: 100vh;                /* 占满整个视口高度 */
  background-color: #f0f2f5;    /* 浅灰色背景，提供柔和的视觉效果 */
}

/**
 * 登录表单卡片样式
 * 创建白色卡片效果
 */
.login-box {
  width: 400px;                 /* 固定宽度 */
  padding: 40px;                /* 内边距 */
  background: #fff;             /* 白色背景 */
  border-radius: 8px;           /* 圆角边框 */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); /* 轻微阴影，增加立体感 */
}

/**
 * Logo区域样式
 */
.logo {
  text-align: center;           /* 居中对齐 */
  margin-bottom: 30px;          /* 底部外边距，与表单分隔 */
}

/**
 * Logo图片样式
 */
.logo img {
  width: 120px;                 /* 固定宽度 */
  height: 120px;                /* 固定高度 */
}

/**
 * 表单组样式
 * 用于包装每个输入字段及其标签
 */
.form-group {
  margin-bottom: 20px;          /* 底部外边距，分隔各输入组 */
}

/**
 * 表单标签样式
 */
.form-group label {
  display: block;               /* 块级显示，独占一行 */
  margin-bottom: 8px;           /* 底部外边距，与输入框分隔 */
  font-size: 14px;              /* 字体大小 */
  color: #606266;               /* 深灰色，提供足够对比度但不过于刺眼 */
}

/**
 * 输入框样式
 */
.form-group input {
  width: 100%;                  /* 占满容器宽度 */
  padding: 10px;                /* 内边距，提供足够的点击区域 */
  border: 1px solid #dcdfe6;    /* 浅灰色边框 */
  border-radius: 4px;           /* 圆角边框 */
  font-size: 14px;              /* 字体大小 */
}

/**
 * 按钮样式
 */
button {
  width: 100%;                  /* 占满容器宽度 */
  padding: 12px;                /* 内边距，提供足够的点击区域 */
  background-color: #409eff;    /* Element Plus主题蓝色 */
  color: #fff;                  /* 白色文字 */
  border: none;                 /* 无边框 */
  border-radius: 4px;           /* 圆角边框 */
  cursor: pointer;              /* 鼠标悬停时显示手型光标 */
  font-size: 14px;              /* 字体大小 */
}

/**
 * 按钮悬停效果
 */
button:hover {
  background-color: #66b1ff;    /* 悬停时颜色变浅，提供视觉反馈 */
}
</style>
